import { View, Text } from "react-native";
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons'; 
import { FontAwesome } from '@expo/vector-icons'; 
import Login from "../pages/Login";
import Film from "../pages/Film";
import Detail from "../pages/Detail";
import Search from "../pages/Search";
import My from "../pages/My";

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabNav = () => {
    return (
          <Tab.Navigator screenOptions={{
              headerShown:false,
              tabBarActiveTintColor:"red",
              tabBarInactiveTintColor:"grey"
          }}>
            <Tab.Screen name="Film" component={Film} 
                options={{
                    tabBarIcon: ({ color }) => (
                        <FontAwesome name="file-movie-o" size={24} color={color} />
                      ),
                }}
            />
            <Tab.Screen name="Search" component={Search} />
            <Tab.Screen name="My" component={My} />
          </Tab.Navigator>
      );
}

export default function index() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                
               
                <Stack.Screen
                    name="TabNav"
                    component={TabNav}
                    options={{
                        headerShown:false,
                        headerLeft: () => <Ionicons name="chevron-back" size={24} color="black" />
                    }}
                />
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="Detail" component={Detail} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}
